<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>标题</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      margin-top: 10px;
    }

    .one {
      border: 1px solid red;
    }

    .two {
      border: 1px solid green;
    }
  </style>
</head>

<body>
  <input type="button" value="按钮" id="btn" /> <br /><br />
  <div class="one" id="one"></div>
</body><br>
<!-- <span style="border:1px solid green">我是一个span标签</span> -->

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    //用原生的js给div注册单击事件.
    //原生js注册相同的事件,后面的会把前面的给覆盖.
    // document.getElementById("one").onclick = function () {
    //   alert('单击事件');
    // };
    // document.getElementById("one").onclick = function () {
    //   alert('单击事件.啦啦啦');
    // };

    //jQuery
    //给同一个元素注册同样的事件,后面的不会把前面的给覆盖.
    // $('#one').click(function () {
    //   alert('单击事件');
    // });
    // $('#one').click(function () {
    //   alert('单击事件,lallal ');
    // });
    // 给按钮添加一个点击事件，创建一个div
    $('#btn').click(function () {
      var $divNew = $('<div class="two"></div>')
      $('body').append($divNew)
    })
    // jquery 简单事件  click  不存在同时注册事件的，不能动态的注册事件
    // $('div').click(function(){
    //   console.log('鼠标点击事件');
    // })
    // $('div').mouseenter(function(){
    //   console.log('鼠标移入事件');
    // })
    // bind   存在同时注册事件的，不能动态的注册事件
    // $('div').bind({
    //   mouseenter:function(){
    //     console.log('鼠标移入事件');
    //   },
    //   click:function(){
    //     console.log('鼠标点击事件');
    //   }
    // })
    // delegate 存在同时注册事件的，能动态的注册事件
    // $('body').delegate('div',{
    //   mouseenter:function(){
    //     console.log('鼠标移入事件');
    //   },
    //   click:function(){
    //     console.log('鼠标点击事件');
    //   }
    // })
    // on
    // $('body').on('click','div', function () {
    //   console.log('鼠标点击事件');
    // })


  });
</script>
</body>

</html>